<template>
	<div>
	<view class="login_from">
		<view class="login_from_input">
			<view class="login_from_name">用户名</view>
			<view class="login_from_fun"><input type="text" v-model="UserVo.userName" placeholder="请输入用户名"></view>
		</view>	
		<view  class="login_from_input">
			<view class="login_from_name">头像</view>
			<image  :src="UserVo.userImage" @tap="uploadImg" mode="aspectFill" class="box"></image>
		</view>
		<view class="login_from_input">`
			<view class="login_from_name">邮箱号</view>
			<view class="login_from_fun"><input type="text" v-model="UserVo.userEmail" placeholder="请选择输入的邮箱号"></view>
		</view>
		<view class="login_from_input">
			<view class="login_from_name">性别</view>
			<view class="login_from_fun"><radio-group name="sex" @change="radioChange">
			<label>
				<radio value="0" checked="checked" /><text>男</text>
				<radio value="1" /><text>女</text>
			</label>
		</radio-group>
			</view>
		</view>
		<view class="login_from_input">
			<view class="login_from_name">年龄</view>
			<view class="login_from_fun"><input type="text" v-model="UserVo.age" placeholder="请选择年龄"></view>
		</view>
		<view class="login_from_input">
			<view class="login_from_fun" @click="personageUpdate">修改个人信息</view>
		</view>
	</view>
	</div>
</template>

<script>
	let caseTaskVo={"tid":0}
	export default {
			data() {
				return {
					imgSrc:'',
					UserVo:{
						userName:'',
						userPhone:'',
						userEmail:'',
						userImage:'',
						sex:'',
						age:'',
						userRole:''
					}
				}
			},
			onLoad() {
				this.handuserMessage()
			},
			methods:{
				radioChange: function(evt) {
						this.UserVo.sex=evt.detail.value
				},
				personageUpdate(){
					console.log(this.UserVo)
					uni.request({
					    url: `http://localhost:7000/user/updateUser`, //接口地址。
					    data: this.UserVo,
					    header: {
					        'custom-header': 'hello' //自定义请求头信息
					    },
						method:'POST',
					    success: (res) => {
					        console.log(res.data);
							if(res.data.flag){
								uni.showToast({
									title:res.data.msg,
									icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
									duration: 2000    //持续时间为 2秒
								})
								uni.navigateTo({
									url:'../personal/index',
									
								})
							}else{
								uni.showToast({
									title:res.data.msg,
									icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
									duration: 2000    //持续时间为 2秒
								})
								console.log(res.data.msg)
							}
					    }
					});	
				},
				handuserMessage(){
					const value = uni.getStorageSync('userId');
					console.log(value)
					this.userId=value
					uni.request({
					    url: `http://localhost:7000/user/userMessage/${this.userId}`, //接口地址。
					    header: {
					        'custom-header': 'hello' //自定义请求头信息
					    },
						method:'POST',
					    success: (res) => {
					        console.log(res.data.data);
							this.UserVo=res.data.data
					    },
					})	
				},
				uploadImg(){
				    uni.chooseImage({
				        count: 1, //默认9
				        sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				        sourceType: ['album'], //从相册选择
				        success:res => {
				            this.imgSrc=res.tempFilePaths[0]
							console.log(this.imgSrc)
				            //上传给后台
				            uni.uploadFile({
				                url:`http://localhost:7000/user/updateFile`,
				                filePath: res.tempFilePaths[0],
								name: 'file',
				                header: {
				                    'Authorization': "hello"
				                },
				                success: (uploadFileRes) => {
									console.log(uploadFileRes.data)
				                    this.UserVo.userImage=uploadFileRes.data
				                }
				            })
				        }	
				    });
				}, 
			}
		}
</script>

<style>
	
	page{ background: #fff; }
	
	.login_img{ width: 100%; height: auto; margin-top: 90upx; }
	.login_img image{ width: 170upx; height: 170upx; display: block; margin: 0px auto; border-radius: 50%; }
	
	.login_from{ width: 100%; height: auto; box-sizing: border-box; padding: 20upx 8%; }
	
	.login_from_input{ width: 100%; height:auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px #eee solid; padding: 40upx 0px; margin: 0px auto;  } 
	
	.login_from_name{ width: 20%; }
	.login_from_fun{ width: 80%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;  }
	.login_from_fun input{ width: 100%; text-align: left; font-size: 14px;  }
	
	
	.login_from_dl{ width: 100%; height: 50px; line-height: 50px; margin-top: 150upx;   }
	.login_from_dl button{ width: 100%; height: 50px; line-height: 50px; background: #FF3B00; color: #fff; border-radius: 50px; }
	
	.logo_xieyi{ width: 100%; height: 40px; line-height: 40px; display: flex; flex-direction: row; margin-top: 30upx; align-items: center; color: #444; font-size: 14px; justify-content: center; }
	.logo_xieyi label{ font-size: 18px; margin-right: 1%; }
	
	.cuIcon-squarecheckfill{ color: #FF3B00; }
	.logo_text text{ color: #FF3B00; }
	
	.getyzm{ width: 60%; display: flex; flex-direction: row; justify-content: flex-end; color: #FF3B00; }
	.cuicon{ font-size: 18px; }  
	.box{
		display: flex;
	}
</style>